<template>
    <el-row class="main padd20">
        <el-col class="box box-pack-between box-align-center">
            <el-col class="tl">
                <!-- <el-button type="primary" @click="$router.push('/add_question')">+ 新建试卷</el-button> -->
                <el-button type="primary" @click="handleAdd()" class="pub-btn">+ 新建试卷</el-button>
            </el-col>
            <el-col class="tr box box-align-center">
                <!-- <el-input placeholder="请输入内容" suffix-icon="el-icon-search" v-model="searchVal">
                </el-input> -->
                <el-input placeholder="试卷名称、创建老师" v-model="searchVal" class="input-with-select">
                    <el-select v-model="select" slot="prepend" placeholder="" @change="change">
                        <el-option label="全部分类" value=""></el-option>
                        <el-option label="考试" value="2"></el-option>
                        <el-option label="测验" value="1"></el-option>
                    </el-select>
                    <el-button slot="append" icon="el-icon-search" @click="getData"></el-button>
                </el-input>
            </el-col>
        </el-col>

        <el-col class="paper-list" v-loading="loading">
            <el-col v-if="page.list.length !=0 ">
                <el-col class="list box box-align-center" v-for="(item,index) in page.list" :key="index">
                    <el-col :span="8" class="left h100 box box-tb box-align-start box-pack-center">
                        <h2>{{item.name}}</h2>
                        <span class="mt10"
                            style="color: #888F9F;font-size: 15px;">{{`${item.createusername}创建于`+$moment(item.createtime).format('YYYY-MM-DD HH:mm:ss')}}</span>
                    </el-col>
                    <el-col :span="8" class="h100 box box-align-center box-pack-center">
                        <span style="font-size: 14px;min-width: 60px;" class="mr10">已用于</span>
                        <el-link type="primary" :underline="false" style="color: #7F84E4;">{{item.cousname}}</el-link>
                    </el-col>
                    <el-col :span="8" class="h100 box box-tb box-align-center">
                        <el-col class="box box-pack-end">
                            <div class="divider">
                                <span>{{item.danxuancnt!=null?item.danxuancnt:0}}单选</span>
                                <el-divider direction="vertical"></el-divider>
                                <span>{{item.duoxuancnt!=null?item.duoxuancnt:0}}多选</span>
                                <el-divider direction="vertical"></el-divider>
                                <span>{{item.panduancnt!=null?item.panduancnt:0}} 判断</span>
                                <el-divider direction="vertical"></el-divider>
                                <span>总分 {{item.score!=null?item.score:0}}</span>
                            </div>
                        </el-col>
                        <el-col class="mt10 box box-align-center box-pack-center">
                            <i class="el-icon-setting mr10 cp" @click="handleEdit(item)"></i>

                            <el-popover placement="bottom" width="60" trigger="click">
                                <div class="box box-tb box-align-center box-pack-center">
                                    <div class="item" @click="goLib(item)">编辑试题</div>
                                    <div class="item" @click="handleDelete(item)">删除</div>
                                </div>
                                <div slot="reference">
                                    <i class="el-icon-more cp"></i>
                                </div>
                            </el-popover>

                        </el-col>
                    </el-col>
                </el-col>
            </el-col>
            <el-col v-else>
                <el-empty></el-empty>
            </el-col>
        </el-col>
        <!-- 创建试卷 -->
        <el-dialog :visible.sync="dialogVisible" width="600px" class="exam">
            <div slot="title" class="dialog-title">
                <div class="box box-align-center box-pack-start">
                    <i class="tips"></i>
                    <span>{{form.type == 2?'新建考试':'新建测验'}}</span>
                </div>
            </div>
            <el-form :model="form" ref="form" :rules="rules">
                <el-form-item label="试卷名称" :label-width="formLabelWidth" prop="name">
                    <el-input v-model="form.name" autocomplete="off" class="re-input"></el-input>
                </el-form-item>
                <el-form-item label="试卷类型" :label-width="formLabelWidth">
                    <el-radio-group v-model="form.type" @change="changeRadio">
                        <el-radio :label="1">测验</el-radio>
                        <el-radio :label="2">考试</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item :label="form.type == 2?'关联课程':'关联章节'" :label-width="formLabelWidth" prop="value">
                    <!-- <el-select v-model="form.region" :placeholder="form.type == 1?'关联课程':'关联章节'" class="re-input">
                        <el-option label="区域一" value="shanghai"></el-option>
                        <el-option label="区域二" value="beijing"></el-option>
                    </el-select> -->
                    <el-cascader v-model="form.value" :options="options" @change="handleChange"></el-cascader>
                </el-form-item>
                <!-- <el-form-item label="答题时长" :label-width="formLabelWidth" v-show="form.type == 1?true:false">
                    <el-radio-group v-model="form.time">
                        <el-radio :label="1">
                            <el-input-number v-model="form.num" size="small" :step="5" controls-position="right"
                                @change="handleChange" :min="10" :max="200" class="mr10"></el-input-number>分钟
                        </el-radio>
                        <el-radio :label="2">不限时长</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="开放时间" :label-width="formLabelWidth">
                    <el-date-picker v-model="form.date" type="daterange" range-separator="至" start-placeholder="开始日期"
                        end-placeholder="结束日期" value-format="yyyy-MM-dd">
                    </el-date-picker>
                </el-form-item> -->
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button type="text" @click="handleSave(0)" class="return-btn">保存，暂不添加</el-button>
                <el-button type="primary" @click="handleSave(1)" class="pub-btn">去添加题目</el-button>
            </span>
        </el-dialog>
    </el-row>
</template>

<script>
    export default {
        data() {
            return {
                searchVal: '',
                select: '',
                page: {
                    pageNum: 1,
                    pageSize: 10,
                    list: []
                },
                schoolid: this.$store.state.schoolId,
                user: this.$store.state.loginInfo.user,
                dialogVisible: false,
                loading: false,
                form: {
                    name: '',
                    type: 1,
                    value: [],
                    isEdit: false
                },
                rules: {
                    name: [{
                        required: true,
                        message: '请输入试卷名称',
                        trigger: 'blur'
                    }],
                    value: [{
                        type: 'array',
                        required: true,
                        message: '请选择课程/章节',
                        trigger: 'change'
                    }],
                },
                formLabelWidth: '120px',
                title: '新建考试',
                options: [],
                courseName: '',
                id:null
            };
        },
        created() {
            this.getData()
            this.getCourseData()
        },
        mounted() {

        },
        methods: {
            getCourseData() {
                let url = '/ycous/getcouslist';
                let params = {
                    schoolid: this.schoolid,
                    type: this.form.type,
                };
                this.$ajax.post(url, params).then(res => {
                    console.log(res);

                    if (res.code == 0) {
                        let arr = [];
                        if (this.form.type == 2) {
                            res.list.forEach((item, index) => {
                                let object = {
                                    value: item.id,
                                    label: item.name
                                }
                                arr.push(object)
                            })
                        } else {
                            res.list.forEach((item, index) => {
                                let object = {
                                    value: item.id,
                                    label: item.name,
                                    children: []
                                }
                                arr.push(object)
                                item.stages.forEach((a, i) => {
                                    let itemObject = {
                                        value: a.id,
                                        label: a.title,
                                    }
                                    arr[index].children.push(itemObject)
                                })
                            })
                        }

                        // console.log(arr);
                        this.options = arr
                    }
                })
            },
            change(e) {
                console.log(e);
                this.getData()
            },
            changeRadio(e) {
                console.log(this.form.type);
                this.getCourseData()

            },
            handleAdd(){
                this.form.isEdit = false
                this.dialogVisible = true
                this.$nextTick(res=>{
                     this.$refs['form'].resetFields();
                })

            },
            handleSave(val) {
                this.$refs['form'].validate((valid) => {
                    if (valid) {
                        let url = '/yexam/add';
                        let params;
                        //新增
                        if(this.form.isEdit == false){
                            if (this.form.type == 1) {
                                params = {
                                    name: this.form.name,
                                    cousid: this.form.value[0],
                                    stageid: this.form.value[1],
                                    schoolid: this.schoolid,
                                    createuserid: this.user.id,
                                    createusername: this.user.name
                                };
                            } else {
                                params = {
                                    name: this.form.name,
                                    cousid: this.form.value[0],
                                    schoolid: this.schoolid,
                                    createuserid: this.user.id,
                                    createusername: this.user.name
                                };
                            }

                        }else{
                            //编辑 加id
                            if (this.form.type == 1) {
                                params = {
                                    id:this.id,
                                    name: this.form.name,
                                    cousid: this.form.value[0],
                                    stageid: this.form.value[1],
                                    schoolid: this.schoolid,
                                    createuserid: this.user.id,
                                    createusername: this.user.name
                                };
                            } else {
                                params = {
                                    id:this.id,
                                    name: this.form.name,
                                    cousid: this.form.value[0],
                                    schoolid: this.schoolid,
                                    createuserid: this.user.id,
                                    createusername: this.user.name
                                };
                            }

                        }

                        console.log(params);
                        this.$ajax.post(url, params).then(res => {
                            this.dialogVisible = false
                            console.log(res);
                            if (res.code == 0) {
                                this.$message.success('添加成功')
                                if (val == 1) {
                                    this.goLib(res.exam)
                                }
                                this.getData()
                                this.$refs['form'].resetFields();
                            }
                        })
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });

            },
            handleDelete(item) {
                this.$confirm('是否删除？')
                    .then(_ => {
                        let url = '/yexam/delete';
                        let params = {
                            id: item.id
                        };
                        this.$ajax.post(url, params).then(res => {
                            console.log(res);
                            if (res.code == 0) {
                                this.$message.success('删除成功')
                                this.getData()
                            }
                        })
                    })
                    .catch(_ => {});

            },
            handleChange(value) {
                console.log(value);
            },
            goLib(item) {
                this.$router.push({
                    path: "/add_question",
                    query: {
                        data: JSON.stringify(item)
                    }
                })
            },
            getData() {
                this.loading = true;
                let url = '/yexam/desc';
                let params = {
                    schoolid: this.schoolid,
                    searchtext: this.searchVal,
                    pageNum: this.page.pageNum,
                    pageSize: this.page.pageSize,
                    type:this.select !=''?this.select:''
                };
                // console.log(params);
                this.$ajax.post(url, params).then(res => {
                    console.log(res);
                    this.loading = false;
                    if (res.code == 0) {
                        this.page = res.page
                    }
                })
            },
            handleClose(done) {
                this.$confirm('确认关闭？')
                    .then(_ => {
                        done();
                    })
                    .catch(_ => {});
            },
            handleEdit(item) {
                this.form.value = []
                this.dialogVisible = true
                this.form.isEdit = true
                this.id = item.id
                this.form.name = item.name
                this.form.type = parseInt(item.type)
                this.getCourseData()
                this.form.value.push(item.cousid)
                if(this.form.type == 1){
                    this.form.value.push(item.stageid)
                }

            }
        }
    }
</script>

<style scoped lang="scss">
    .main {
        box-sizing: border-box;
        height: 100%;
        background-color: #fff;
        overflow-y: auto;
    }

    .paper-list {

        .list {
            box-sizing: border-box;
            padding: 10px 20px;
            height: 100px;
            background: #FBFCFF;
            border: 1px solid #ECEFF4;
            border-radius: 6px;
            margin: 10px 0;

            h2 {
                font-size: 20px;
            }

            .h100 {
                height: 100%;
            }

            .divider {
                font-size: 14px;
            }

            i {
                font-size: 28px;
            }
        }

        .left {
            font-size: 16px;
        }
    }


    /deep/ .el-radio__input.is-checked .el-radio__inner {
        border-color: #565DFF;
        background: #565DFF;

        &:hover {
            border-color: #565DFF;
        }
    }

    /deep/ .el-radio__input.is-checked+.el-radio__label {
        color: #606266;
    }

    /deep/ .el-radio__inner:hover {
        border-color: #565DFF;
    }

    /deep/ .el-input__inner:focus {
        border-color: #565DFF;
    }

    /deep/ .re-input .el-input__inner {
        border-radius: 5px;
        border-color: #D0D4E2;
        // &:hover{
        //     border-color: #565DFF !important;
        // }
    }

    /deep/ .re-input .el-input__inner:focus,
    .re-input.el-select .el-input.is-focus .el-input__inner {
        border-color: #565DFF !important;
    }

    //时间修改
    /deep/ .el-range-editor.is-active,
    .el-range-editor.is-active:hover {
        border-color: #565DFF;
    }

    .return-btn {
        color: #ABB0C4;

        &:hover {
            color: #000;
        }
    }


    .tips {
        margin-right: 5px;
        width: 4px;
        height: 18px;
        background: #626BF1;
        border-radius: 2px;
    }

    .item {
        width: 100%;
        height: 35px;
        line-height: 35px;
        text-align: center;
        cursor: pointer;

        &:hover {
            color: #4852EC;
            background-color: #F0F3F8;
        }
    }

    .pub-btn {
        padding: 0;
        width: 126px;
        height: 36px;
        line-height: 36px;
        background: #565DFF;
        border-color: #565DFF;
        border-radius: 7px;

        &:hover {
            background: rgba(86, 93, 255, .8);
            border-color: rgba(86, 93, 255, .8);
        }

        &.el-button--primary.is-active,
        .el-button--primary:active {
            background: rgba(86, 93, 255, .8);
            border-color: rgba(86, 93, 255, .8);
        }

        &.el-button--primary:focus,
        .el-button--primary:hover {
            background: rgba(86, 93, 255, .8);
            border-color: rgba(86, 93, 255, .8);
        }
    }
</style>
